<script setup>

import router from "@/router";
import {onBeforeMount} from "vue";
import {role_filter} from "@/stores/travller";
import {userLogout} from "@/api/api";

onBeforeMount(() => {
  role_filter("admin")
})

const logout = () => {
  userLogout().then(res => {
    console.log(res)
    localStorage.removeItem("token");
    router.push('/login')
  })

}

</script>

<template>
<body class="page">
  <div class="left">
    <h1 @click="router.push('/admin')">学术</h1>
    <div class="operation" @click="router.push('/admin/user')">
      <h2>用户管理</h2>
    </div>
    <div class="operation" @click="router.push('/admin/result')">
      <h2>成果管理</h2>
    </div>
    <div  class="operation" @click="logout">
      <h2>登出</h2>
    </div>
  </div>
  <div class="right">
    <router-view></router-view>
  </div>
</body>
</template>

<style scoped>


.page{
  display: flex;
  margin: 0;
  width: 100%;
  height: auto;
  background-color: #f7f8fa;
  .left{
    position: fixed;
    top: 0;
    width: 16%;
    background-color: #2D333B;
    height: 100vh;
  }
  .right{
    width: 83%;
    margin-left: 17%;
    min-height: 100vh;
  }
}
.operation{
  margin-top: 2%;
  padding: 10%;
  h2{
    color: #5470C6;
    margin: 0;
  }
  &:hover{
    background-color: #324376;
    transition: 0.5s;
  }
}

h1{
  color: #9d0707;
  &:hover{
    background-color: #5C7BD9;
    transition: 0.5s;
  }
}
</style>